<template>
  <div class="detail">
    <div class="descriptions">
      <table>
        <tr>
          <td colspan="2"><span class="label">地震事件简称：</span><span>{{detilList.dedName}}</span></td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">发生时刻：</span><span>{{detilList.dedTime}}</span></td>
        </tr>
        <tr>
          <td><span class="label">经度(°)：</span><span>{{detilList.dedLongitude}}</span></td>
          <td><span class="label">纬度(°)：</span><span>{{detilList.dedLatitude}}</span></td>
        </tr>
        <tr>
          <td><span class="label">震级(级)：</span><span>{{detilList.dedEarthquake}}</span></td>
          <td><span class="label">参考位置：</span><span>{{detilList.dedLocation}}</span></td>
        </tr>
        <tr>
          <td><span class="label">震源深度(千米)：</span><span>{{detilList.dedDepth}}</span></td>
          <td><span class="label">最高烈度：</span><span>{{detilList.dedDeathToll}}</span></td>
        </tr>
        <tr>
          <td><span class="label">震中(宏观)：</span><span>{{detilList.dedMacroscopicEpicenter}}</span></td>
          <td><span class="label">死亡人数：</span><span>{{detilList.dedDeathToll}}</span></td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">死亡原因：</span><span>{{detilList.dedCauseOfDeath}}</span></td>
        </tr>
        <tr>
          <td><span class="label">受伤人数：</span><span>{{detilList.dedNumberOfInjury}}</span></td>
          <td><span class="label">安置人数：</span><span>{{detilList.dedNumberOfPlacement}}</span></td>
        </tr>
        <tr>
          <td><span class="label">救援力量投入人数：</span><span>{{detilList.dedRescueForceInput}}</span></td>
          <td><span class="label">医疗力量投入人数：</span><span>{{detilList.dedInputOfMedicalForce}}</span></td>
        </tr>
        <tr>
          <td><span class="label">经济损失（亿元）：</span><span>{{detilList.dedEconomicLosses}}</span></td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">基础设施破坏情况：</span><span>{{detilList.dedInfrastructureDamage}}</span></td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">地质灾害情况：</span><span>{{detilList.dedGeologicalHazardSituation}}</span></td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">次生火灾：</span><span>{{detilList.dedSecondaryFire}}</span></td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">次生水灾：</span><span>{{detilList.dedSecondaryFlood}}</span></td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">次生爆炸：</span><span>{{detilList.dedSecondaryExplosion}}</span></td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">危化品泄漏：</span><span>{{detilList.dedDangerousChemicalLeak}}</span></td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">震害现象描述：</span><span>{{detilList.dedDisasterDescription}}</span></td>
        </tr>
        <tr>
          <td colspan="4">
            <p>
              <span class="label">典型震害图片：</span>
              <!-- <p style="width: calc(100% - 140px);display: inline-block;vertical-align: text-top;margin: 0 0;">
                <img w-full v-for="item in detilList.typicalEarthquakeDamagePicture" :key="item.attachId" :src="imgUrl+item.attachId" alt="典型震害图片" style="width: 180px;margin: 10px;" />
              </p> -->
              <p style="width: calc(100% - 140px);display: inline-block;vertical-align: text-top;margin: 0 0;">
                <ImagePreview  v-for="item in detilList.typicalEarthquakeDamagePicture" :key="item.attachId" :src="imgUrl+item.attachId" width="180px"></ImagePreview>
              </p>
            </p>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <p>
              <span class="label">等震线及烈度图：</span>
              <p style="width: calc(100% - 140px);display: inline-block;vertical-align: text-top;margin: 0 0;">
                <ImagePreview  v-for="item in detilList.isoseismalLineAndIntensityPicture" :key="item.attachId" :src="imgUrl+item.attachId" width="180px"></ImagePreview>
              </p>
            </p>
          </td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">备注：</span><span>{{detilList.remark}}</span></td>
        </tr>
        <tr>
          <td colspan="2">
            <p>
              <span class="label">附件：</span>
              <!-- <file-upload ref="fileUpload" :disabled="true" v-model="detilList.enclosure" /> -->
              <transition-group class="review-file-list" name="el-fade-in-linear" tag="ul">
                <li :key="file.uid" class="review-file-list__item el-upload-list__item" v-for="(file, index) in detilList.enclosure">
                  <el-link @click="handleDownload(file.attachId)" :underline="false" target="_blank">
                    <span class="el-icon-document">&nbsp;&nbsp;{{ file.attachName }} </span>
                  </el-link>
                </li>
              </transition-group>
            </p>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  detilList: {
    default: {},
    type: Object,
  },
});
const imgUrl = "/attachment/downLoadFile?attachId="
onMounted(() => {
  console.log(props)
})
const handleDownload = (attachId) => {
  location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId="+ encodeURIComponent(attachId);
}
</script>

<style lang="scss" scoped>
.detail{
  width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 40px;
  h1{
      text-align: center;
      font-weight: 700;
      font-size: 24px;
      color: rgb(16,124,229);
  }
  .descriptions{
    margin-left: 100px;
    td{
      width: 350px;
      span{
        display: inline-block;
      }
      .label{
        text-align: right;
        display: inline-block;
        color: #606266;
        font-weight: 700;
        height: 32px;
        width: 140px;
        padding-right: 14px;
      }
      .review-file-list{
        list-style: none;
        width: calc(100% - 140px);
        display: inline-block;
        padding: 0;
        vertical-align: text-top;
        margin: 0;
      }
      .review-file-list .review-file-list__item {
        border: 1px solid #e4e7ed;
        line-height: 2;
        margin-bottom: 10px;
        position: relative;
      }
    }
  }
}
</style>